<template>
  <div class="filter-header">
    <el-tabs class="count-tabs" v-model="active" @tab-click="changeTabs">
      <el-tab-pane :label="$t('媒体使用情况统计')" name="media">
        <count-panel :filter-type="mediaFilter" :columns="mediaCols" :tabIndex="tabIndex"></count-panel>
      </el-tab-pane>
      <el-tab-pane :label="$t('节目下载情况统计')" name="program">
        <count-panel :filter-type="programFilter" :columns="programCols" :tabIndex="tabIndex"></count-panel>
      </el-tab-pane>
      <el-tab-pane label="新闻点击情况统计" name="scan">
        <count-news-panel></count-news-panel>
        <!-- <count-panel :filter-type="scanFilter" :columns="scanCols" :tabIndex="tabIndex"></count-panel> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CountPanel from './CountPanel'
import CountNewsPanel from './CountNewsPanel'
export default {
  name: 'CountList',
  components: { CountPanel,CountNewsPanel },
  data() {
    const headerContextMenus = {
      width: '120px',
      items: ['sortUp', 'sortDown', 'line', 'cols'],
    }
    return {
      tabIndex: '0',
      active: 'media',
      mediaFilter: {
        type: 0,
        typeName:'media',
        firsttitle: this.$t('选择媒体资源'),
        firstFilterone: this.$t('媒体分组'),
        firstFiltertwo: this.$t('媒体资源'),
        firstShow: true,
        secondShow: true,
        thirdShow: true,
        lastShow: true,
      },
      programFilter: {
        type: 1,
        typeName:'program',
        firsttitle: this.$t('选择节目资源'),
        firstFilterone: this.$t('节目分组'),
        firstFiltertwo: this.$t('选择节目'),
        firstShow: true,
        secondShow: true,
        thirdShow: true,
        lastShow: true,
      },
      scanFilter: {
        type: 2,
        typeName:'scan',
        firsttitle: this.$t('选择节目资源'),
        firstFilterone: this.$t('节目分组'),
        firstFiltertwo: this.$t('选择节目'),
        firstShow: true,
        secondShow: true,
        thirdShow: true,
        lastShow: true,
      },
      mediaCols: [
        {
          label: this.$t('终端名称'),
          prop: 'terminalName',
          sortable: false,
          align: 'center',
          minwidth:120,
          show: true,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('终端MAC'),
          prop: 'terminalMac',
          sortable: false,
          align: 'center',
          minwidth:120,
          show: true,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('屏幕名称'),
          prop: 'screenName',
          sortable: false,
          align: 'center',
          minwidth:120,
          show: true,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('播放次数'),
          prop: 'playCount',
          sortable: false,
          align: 'center',
          minwidth:90,
          show: true,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('播放时间'),
          prop: 'playTime',
          sortable: false,
          align: 'center',
          minwidth:90,
          show: true,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
      ],
      programCols: [
        {
          label: this.$t('终端名称'),
          prop: 'terminalName',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('分组名称'),
          prop: 'groupName',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('终端MAC'),
          prop: 'terminalMac',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('节目名称'),
          prop: 'name',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('素材总数'),
          prop: 'mediaCount',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('已下载的素材数'),
          prop: 'downloaded',
          show: true,
          sortable: false,
          align: 'center',
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('更新时间'),
          prop: 'uploadTime',
          show: true,
          sortable: false,
          align: 'center',
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
      ],
      scanCols: [
        {
          label: this.$t('媒体名称'),
          prop: 'mediaName',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('终端MAC'),
          prop: 'terminalMac',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('屏幕名称'),
          prop: 'screenName',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('节目名称'),
          prop: 'programName',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        },
        {
          label: this.$t('扫码次数'),
          prop: 'scanCount',
          sortable: false,
          align: 'center',
          show: true,
          minwidth:120,
          headerContextMenus: JSON.parse(JSON.stringify(headerContextMenus)),
        }
      ]
    }
  },
  methods: {
    changeTabs(val) {
      this.tabIndex = val.index
    }
  },
}
</script>
<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.filter-header {
  ::v-deep .count-tabs .el-tabs__header {
    margin: 0 0 15px 0px;
  }
  ::v-deep .el-tabs__active-bar {
    left: 20px;
  }
  ::v-deep .el-tabs__nav {
    padding-left: 20px;
    line-height: 44px;
    height: 44px;
  }
  ::v-deep .el-tabs__content{
    overflow: scroll;
  }
}

</style>